<template>
	<view class="contract">
		<view class="tabs__nav--card">
			<view class="tabs" :class="{active: active === 0}" @tap="onTabs(0)">BHT资产</view>
			<view class="tabs" :class="{active: active === 1}" @tap="onTabs(1)">BHT钱包</view>
		</view>
		<view class="tab">
			<view class="tab-title">
				<view class="name">{{active ? '可售资产兑换BHT钱包' : 'BHT钱包存入BHT资产'}}</view>
			</view>
			<view class="tab-cell">
				<van-cell-group>
					<van-cell title="可售资产" :value="userInfo.price || 0" :border="false" />
					<van-cell title="BHT钱包" :value="userInfo.kprice || 0" :border="false" />
					<van-cell title="BHT资产" :value="userInfo.krprice || 0" />
				</van-cell-group>
			</view>
			<view class="tab-field">
				<van-cell-group>
					<van-field
						:placeholder="active ? '10的整倍数' : '1BHT=5.00资产'"
						clearable
						:value="from.immNums"
						type="number"
						:label="active ? '兑换数量' : '存入数量'"
						@change="cSum"
					/>
					<van-field
						placeholder="请输入二级密码"
						clearable
						:value="from.pwdtwo"
						type="password"
						label="二级密码"
						:border="false"
						@change="cPassword"
					/>
				</van-cell-group>
			</view>
			<view class="tab-btn-wrap">
				<button class="base-btn" @tap="onSubmit">{{active ? '确定兑换' : '确定存入'}}</button>
			</view>
			
			<button class="base-btn dayKrprice-btn" hover-class="btn-hover" v-if="!active" @tap="dayKrprice">每日释放</button>
		</view>
	</view>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import {regPayPassword} from '../../../common/utils/reg.js';
export default {
	data() {
		return {
			active: 0,
			from: {
				immNums: '',
				pwdtwo: ''
			}
		};
	},
	onShow() {},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo'
		})
	},
	methods: {
		...mapActions([
			'setUserInfo'
		]),
		dayKrprice () {
			uni.showLoading({
				title: '释放中...'
			})
			this.$http.dayKrprice().then(res => {
				const data = res.data
				uni.hideLoading()
				if (data.success) {
					uni.showModal({
						title: '释放成功',
						content: `获得${data.data}个可售资产!`,
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								this.userInfo.price = parseFloat(this.userInfo.price + data.data).toFixed(2)
							}
						}
					})
					return
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			})
		},
		onSubmit () {
			if (this.active) {
				this.immExchange()
				return
			}
			this.saveKprice()
		},
		immExchange () {
			if (this.from.immNums%10 !== 0) {
				uni.showToast({
					title: '请输入10的整倍数', 
					icon: 'none'
				});
				return
			}
			const pwd = regPayPassword(this.from.pwdtwo)
			if (pwd) {
				uni.showToast({
					title: pwd, 
					icon: 'none'
				});
				return
			}
			uni.showLoading({
				title: '正在兑换...'
			})
			this.$http.immExchange(this.from).then(res => {
				const data = res.data
				if (data.success) {
					uni.showToast({
						title: '兑换成功'
					});
					this.userInfo.price = parseFloat(Number(this.userInfo.price) - Number(this.from.immNums)).toFixed(2)
					this.userInfo.kprice = parseFloat(Number(this.userInfo.kprice) + Number(this.from.immNums)).toFixed(2)
					this.onClear()
					return
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			})
		},
		saveKprice () {
			if (this.from.immNums%10 !== 0) {
				uni.showToast({
					title: '请输入10的整倍数', 
					icon: 'none'
				});
				return
			}
			const pwd = regPayPassword(this.from.pwdtwo)
			if (pwd) {
				uni.showToast({
					title: pwd, 
					icon: 'none'
				});
				return
			}
			uni.showLoading({
				title: '正在存入...'
			})
			this.$http.saveKprice({
				nums:this.from.immNums,
				pwdtwo: this.from.pwdtwo
			}).then(res => {
				const data = res.data
				if (data.success) {
					uni.showToast({
						title: '存入成功'
					});
					this.userInfo.krprice = parseFloat(Number(this.from.immNums) * 5 + Number(this.userInfo.krprice)).toFixed(2)
					this.userInfo.kprice = parseFloat(Number(this.userInfo.kprice) - Number(this.from.immNums)).toFixed(2)
					this.onClear()
					return
				}
				uni.showToast({
					title: data.errMsg,
					icon: 'none'
				});
			})
		},
		onTabs (type) {
			this.active = type
			this.onClear()
		},
		onClear () {
			this.$set(this.from, 'immNums', '')
			this.$set(this.from, 'pwdtwo', '')
		},
		cSum(e) {
			this.from.immNums = Number(e.detail)
		},
		cPassword(e) {
			this.from.pwdtwo = e.detail
		},
	}
};
</script>
<style scoped lang="scss">
.contract {
	padding: 30upx 0;
	.tabs__nav--card {
		display: flex;
		border:1px solid #3e527e;
		width: 50%;
		margin: auto;
		border-radius:2px;
		.tabs {
			position:relative;
			padding:0 10upx;
			font-size: 24upx;
			line-height: 60upx;
			color:#7d7e80;
			text-align:center;
			cursor:pointer;
			background-color:#fff;
			box-sizing:border-box;
			-webkit-flex:1;
			flex:1;
			&.active {
				color: #fff;
				background-color:#3e527e;
				border-color:#3e527e;
			
			}
		}
	}
	.tab {
		&-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 60upx 30upx;
			text-align: right;
			.name {
				font-size: 40upx;
				font-weight: 600;
			}
		}
		&-cell {
			margin-bottom: 20upx;
		}
		&-field {
			margin-bottom: 60upx;
		}
		&-btn-wrap {
			padding: 40upx 60upx;
		}
	}
	.dayKrprice-btn {
		display: block;
		border: 0;
		margin: 20upx 60upx;
		background-color: #1989fa;
		color: #ffffff;
	}
}
</style>
